<template>
  <div class="error-boundary-wrapper">
    <div v-if="error" class="error-boundary">
      <div class="error-content">
        <i class="fas fa-exclamation-circle"></i>
        <h2>{{ error.message || '发生错误' }}</h2>
        <button class="btn" @click="reload">
          <i class="fas fa-redo"></i> 重试
        </button>
      </div>
    </div>
    <div v-else>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ErrorBoundary',
  
  data() {
    return {
      error: null
    }
  },
  
  methods: {
    reload() {
      this.error = null
      window.location.reload()
    }
  },
  
  errorCaptured(err) {
    this.error = err
    return false
  }
}
</script>

<style lang="scss" scoped>
.error-boundary {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  
  .error-content {
    i {
      font-size: 4rem;
      color: var(--accent-color);
      margin-bottom: 1rem;
    }
    
    h2 {
      margin-bottom: 2rem;
    }
  }
}
</style> 